<template>
  <div class="appointment"  style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">预约中心</div>
      <div class="btn">
        <a-button type="primary" @click="openModal">导入</a-button>
        <a-button type="primary" @click="openModal">导出</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index">
        <span slot="customer" slot-scope="customer">{{customer && customer.name?customer.name:'--'}}</span>
        <span slot="store" slot-scope="store">{{store && store.name?store.name:'--'}}</span>
        <span slot="phone" slot-scope="phone,record">{{record.customer && record.customer.phone?record.customer.phone:'--'}}</span>
        <span slot="good" slot-scope="good">{{good && good.name?good.name:'--'}}</span>
        <span slot="status" slot-scope="status">{{status == 1?'已预约':status == 2?'已开单':status == 3?'已过期':'取消'}}</span>
<!--        4=取消，1=已预约，2=已开单，3=已过期-->
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
  </div>
</template>
<script>
  import { column } from './index'
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  export default {
    name:'appointment',
    components:{
      Pagination,
      Search,
    },
    data(){
      return {
        columns: [],
        columnsData:[],
        page:1,
        total:0,
        searchText:{},
        search:[
          {
            type:'input',
            name:'会员名称',
            place:'请输入名称',
            val:'',
            key:'name',
          },
          {
            type:'select',
            name:'预约门店',
            place:'请选择门店',
            val:'',
            key:'store_no',
            nameKey:'name',
            idKey:'store_no',
            selectData:[]
          },
          {
            type:'input',
            name:'员工编号',
            place:'请输入编号',
            val:'',
            key:'job_no',
          }
        ],
        jurisdiction:[
          { key:'admin-customer-detail', back:'look'},
          { key:'admin-customer-add', back:'add'},
          { key:'admin-customer-update', back:'update'},
          { key:'admin-customer-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.columns = column;
      this.getList();
      this.getPermission();
      // this.configJurisdiction = this.getJurisdiction(1,this.jurisdiction)
      // console.log(this.configJurisdiction)
    },
    methods:{
      openModal(){},
      pageSize(e){
        this.page = e;
        this.getList()
      },
      searchVal(e){
        this.searchText = e;
        this.getList()
      },
      getPermission(){
        this.Api.permission().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data
          })
        })
      },
      getList(){
        let data = this.searchText;
        data.size = 10;
        data.page = this.page;
        this.Api.reservations(data).then(res=>{
          if(res.code !== 200) return;
          this.columnsData = res.data.items;
          this.total = res.data.total
        })
      }
    }
  }
</script>
